<template>
	<view class="con">
		<view class="top">
			<view class="top1 flex flex_between">
				<view class="top1z">
					<view class="top1z_t1">可结算余额(元)</view>
					<view class="top1z_t2">{{userInfo.money}}</view>
				</view>
				<view class="top1y flex" @click="showTan">
					<image class="top1y_img" src="/static/mine/img12.png" mode="widthFix"></image>
					<text class="top1y_t">结算</text>
				</view>
			</view>
			<view class="top2 flex flex_between">
				<view class="top2z flex">已结算(元)<text>{{userInfo.money_withdraw}}</text></view>
				<navigator hover-class="none" url="/packageA/mine/cashRecords" class="top2y">结算记录</navigator>
			</view>
		</view>
		<!-- 列表 -->
		<view class="list">
			<!-- <navigator hover-class="none" :url="userInfo.zfb?'/packageA/mine/alipayResult':'/packageA/mine/alipay'" class="list_li flex flex_between">
				<view class="list_liz">我的账号</view>
				<image class="list_liy" src="/static/jiant.png" mode="widthFix"></image>
			</navigator> -->
			<navigator url="/packageA/mine/revenueDetails" class="list_li flex flex_between">
				<view class="list_liz">收益明细</view>
				<image class="list_liy" src="/static/jiant.png" mode="widthFix"></image>
			</navigator>
		</view>
	
		<view class="zhezhao" v-if="isShow" @click="hideTan"></view>
		<!-- 点击提现弹出 -->
		<view class="tan" v-if="isShow">
			<view class="tan_title">添加账号</view>
		  <view class="tan_t flex">
		    <view class="tan_t2">亲，提现需要添加您的收款信息哦，请点击确认到跳转页面填写</view>
		  </view>
		  <view class="tan_b flex flex_between">
		    <view class="tan_b_d1" @click="hideTan">取消</view>
		    <view class="tan_b_d2" @click="GoAddZfb">确认</view>
		  </view>
		</view>
	</view>
</template>

<script>
  import {
  	getLoginUser //获取用户信息
  } from '@/request/api.js'
	export default {
		data() {
			return {
				isShow:false,
        openid: uni.getStorageSync('openid'), //获取缓存的openid
        userInfo: uni.getStorageSync('userInfo') //授权后的信息
			}
		},
		onLoad() {

		},
    onShow() {
      this.isShow = false
      this.getLoginUserFun()// 更新用户信息
    },
		methods: {
      // 获取用户信息--通过接口
      getLoginUserFun() {
      	let that = this
      	getLoginUser({
      		openid: this.openid,
      		pid: uni.getStorageSync('pid') || ''
      	}).then(res => {
      		console.log('钱包页面--获取用户信息')
      		console.log(res)
      		if (res.error_code === 0) {
      			uni.setStorageSync('userInfo', that.userInfo);
      			that.userInfo = that.userInfo
      			that.$forceUpdate()
      		} else {
      			uni.showToast({
      				icon: 'none',
      				title: res.msg
      			})
      		}
      	})
      },
			showTan(){
        // 点击时候，判断是否有支付宝，如果填支付宝了直接进入提现页面，如果没有“弹窗”然后引导填写
        if(this.userInfo.zfb===''){
          this.isShow = true
        }else{
          uni.navigateTo({
          	url:'/packageA/mine/cash'
          })
        }
        // this.isShow = true
			},
			hideTan(){
				this.isShow = false
			},
			GoAddZfb(){
				console.log('去-添加支付宝页面')
				uni.navigateTo({
					url:'/packageA/mine/alipay'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.con {
		.top {
			width: 100%;
			height: 320rpx;
			border-radius: 20rpx;
			background-color: rgba(255, 255, 255, 1);
			position: relative;
			overflow: hidden;

			.top1 {
				padding: 36rpx 30rpx;
				width: 100%;
				box-sizing: border-box;
				align-items: normal;

				.top1z_t1 {
					color: rgba(16, 16, 16, 1);
					font-size: 28rpx;
					line-height: 40rpx;
					margin-bottom: 14rpx;
				}

				.top1z_t2 {
					color: rgba(16, 16, 16, 1);
					font-size: 48rpx;
					line-height: 58rpx;
					font-family: 'AvantGardeFont';
				}

				.top1y {
					width: 200rpx;
					height: 64rpx;
					border-radius: 100rpx;
					background-color: rgba(249, 191, 65, 1);
					text-align: center;
					justify-content: center;

					.top1y_img {
						width: 32rpx;
						height: auto;
					}

					.top1y_t {
						color: rgba(0, 0, 0, 1);
						font-size: 28rpx;
						margin-left: 8rpx;
					}
				}
			}

			.top2 {
				width: 100%;
				background-color: rgba(211, 211, 211, 1);
				height: 92rpx;
				position: absolute;
				bottom: 0;
				left: 0;

				.top2z {
					color: rgba(16, 16, 16, 1);
					font-size: 28rpx;
					margin-left: 34rpx;

					text {
						font-family: 'AvantGardeFont';
						margin-left: 20rpx;
					}
				}

				.top2y {
					width: 240rpx;
					height: 92rpx;
					border-radius: 0px 0px 20rpx 0px;
					background-color: rgba(0, 0, 0, 1);
					text-align: center;
					color: rgba(255, 255, 255, 1);
					line-height: 92rpx;
					font-size: 28rpx;
				}
			}
		}

		.list {
			width: 100%;
			height: auto;

			.list_li {
				width: 100%;
				height: 104rpx;
				border-radius: 20rpx;
				background-color: rgba(255, 255, 255, 1);
				padding: 0 30rpx;
				margin-top: 20rpx;
				box-sizing: border-box;

				.list_liz {
					color: rgba(16, 16, 16, 1);
					font-size: 28rpx;
				}

				.list_liy {
					width: 32rpx;
					height: auto;
				}
			}
		}
		.tan_t2{
			width: 100%;
			color: rgba(137,137,137,1);
		}
	}
	.tan {
		margin-top: -177rpx;
	}
</style>